<template>
	<view style="padding: 0 30rpx 30rpx 30rpx;">
		<view class="top">
			<text>用户姓名</text>
			<u-input v-model="info.username" :type="'text'" input-align='right' placeholder="请填写" />
		</view>
		<view class="top">
			<text>机构名称</text>
			<u-input v-model="info.institution" :type="'text'" input-align='right' placeholder="请填写" />
		</view>
		<view class="top">
			<text>机构地址</text>
			<u-input v-model="info.institution_address" :type="'text'" input-align='right' placeholder="请填写" />
		</view>
		<view class="top">
			<text>衣服尺码</text>
			<u-input v-model="info.size" :type="'text'" input-align='right' placeholder="请填写" />
		</view>
		<view class="top">
			<text>我的照片</text>
			<u-upload :header='header' :show-upload-list='true' :max-count='1' @on-success='onsuccess1'
				@on-remove='onremove1' :action="$uphttp" height='180' :file-list="fileList1"></u-upload>
		</view>
		<view class="top">
			<text>身份证号</text>
			<u-input v-model="info.card_no" :type="'text'" input-align='right' placeholder="请填写" />
		</view>
		<view class="phone">
			<view class="phone_1">
				身份证照片
			</view>
			<view class="shangchuan">
				<u-upload :file-list="fileList2" :custom-btn="true" :header='header' :show-upload-list='true'
					:max-count='1' width='440' height='240' @on-success='onsuccess2' @on-remove='onremove2'
					:action="$uphttp">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image src="https://s4.ax1x.com/2022/01/25/7HOqDf.png" style="width: 44rpx;height: 44rpx;" />
					</view>
				</u-upload>
				<text class="zheng">（ 身份证正面 ）</text>
			</view>
			<view class="shangchuan">
				<u-upload :file-list="fileList3" :header='header' :show-upload-list='true' :max-count='1'
					@on-success='onsuccess3' @on-remove='onremove3' width='440' height='240' :action="$uphttp"
					:custom-btn="true">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image src="https://s4.ax1x.com/2022/01/25/7HOqDf.png" style="width: 44rpx;height: 44rpx;" />
					</view>
				</u-upload>
				<text class="zheng">（ 身份证反面 ）</text>
			</view>
		</view>

		<view class="imaher">
			<image @click="submit" src="https://s4.ax1x.com/2022/01/25/7HXePJ.png"
				style="width: 300rpx;height:88rpx ;" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				cur_id: '',
				info: {
					card_image: [],
				},
				header: {},
				fileList1: [],
				fileList2: [],
				fileList3: [],
			};
		},
		onShow() {
			this.header.token = uni.getStorageSync('token')
			console.log(this.header)
		},
		onLoad(e) {
			this.cur_id = e.cur_id
			this.order_id = e.order_id
			this.$api('offline/userInfo', {
				cur_id: this.cur_id,
				order_id: this.order_id
			}).then(res => {
				this.info = res.data
				if (res.data.pic) {
					this.fileList1.push({
						url: res.data.pic
					})
				}
				if (res.data.car_image_front) {
					this.fileList2.push({
						url: res.data.car_image_front
					})
				}
				if (res.data.car_image_back) {
					this.fileList3.push({
						url: res.data.car_image_back
					})
				}
			})
		},
		methods: {
			onremove1() {
				this.$toast('删除成功', 1)
				this.info.pic = ''
				console.log(this.info)
			},
			onremove2() {
				this.$toast('删除成功', 1)
				this.info.car_image_front = ''
			},
			onremove3() {
				this.$toast('删除成功', 1)
				this.info.car_image_back = ''
			},

			onsuccess1(a, b, c) {
				this.$toast('上传成功', 1)
				this.info.pic = a.data[1]
				console.log(this.info)
			},
			onsuccess2(a, b, c) {
				this.$toast('上传成功', 1)
				this.info.car_image_front = a.data[1]
				console.log(this.info)
			},
			onsuccess3(a, b, c) {
				this.$toast('上传成功', 1)
				console.log(this.info)
				this.info.car_image_back = a.data[1]
			},
			// Object()
			submit() {
				this.info.card_image = this.info.car_image_front + ',' + this.info.car_image_back
				this.$api('offline/completionUserInfo', this.info).then(res => {
					if (res.code == 1) {
						this.$toast(res.msg, 1)
					} else {
						this.$toast(res.msg, 0)
					}
				})
				// uni.navigateTo({
				// 	url: `/pages/play/purchase?type=${'线下课程'}&biaoti=${'报名'}`
				// });
			},
		}
	}
</script>

<style lang="scss">
	.phone_1 {
		margin-top: 40rpx;
		;
	}

	.imaher {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		text-align: center;
	}

	.shangchuan {
		margin-top: 40rpx;
		display: flex;
		align-items: center;

		.zheng {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
			opacity: 1;
		}
	}

	.slot-btn {
		width: 440rpx;
		height: 240rpx;
		line-height: 240rpx;
		text-align: center;
		background-color: #F5F5F5;
		;
	}

	.top {
		text {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			color: #333333;
			font-weight: 500;
			opacity: 1;
		}

		margin-top: 30rpx;
		border-bottom: 1rpx solid #E3E3E3;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}
</style>
